<template>
	<view class="page flex" :style="{ '--fss': app.theme.fss() }">
		<view class="pageMain flex">
			<view class="indexHead">
				<status-bar></status-bar>
				<view class="indexView flex">
					<view class="searchView flex" @tap="app.util.openUrl({ url: '/pages/index/search', animationType: 'slide-in-bottom' })">
						<text class="iconfont icon-sousuo"></text>
						<text class="text">搜索AI创作的歌曲</text>
						<view class="btn">搜索</view>
					</view>
					<image src="/static/img/default.webp" mode="aspectFill" class="rightUser" @tap="app.util.openUrl({ url: '/pages/user/my', openType: 'switchTab' })"></image>
				</view>
			</view>
			<scroll-view scroll-y class="pageScroll">
				<view class="musicTitle flex" style="margin-top: 10rpx;">
					<view class="left">
						<text>音乐推荐</text>
					</view>
				</view>
				<scroll-view scroll-x class="scrollxView recomondView">
					<view class="view">
						<view class="item" @tap="app.util.openUrl({ url: '/pages/create/play' })">
							<view class="back"></view>
							<view class="main">
								<image src="https://file.shengmaapp.com/storage/aichat/20240401/e659762a02dbbd9e6ffbc6c1e17079f4.jpg" mode="aspectFill" class="image"></image>
								<view class="info flex">
									<view class="left">
										<view class="h3 ell">欢快的歌曲</view>
										<view class="desc ell">金发美女制作</view>
									</view>
									<view class="play flex">
										<text class="iconfont icon-bofang1"></text>
									</view>
								</view>
							</view>
						</view>
						<view class="item" @tap="app.util.openUrl({ url: '/pages/create/play' })">
							<view class="back"></view>
							<view class="main">
								<image src="https://file.shengmaapp.com/storage/aichat/20240401/c45045ad649c15f6e98bef1fdf4a0def.jpg" mode="aspectFill" class="image"></image>
								<view class="info flex">
									<view class="left">
										<view class="h3 ell">生日快乐</view>
										<view class="desc ell">1950s jazz scat</view>
									</view>
									<view class="play flex">
										<text class="iconfont icon-bofang1"></text>
									</view>
								</view>
							</view>
						</view>
						<view class="item" @tap="app.util.openUrl({ url: '/pages/create/play' })">
							<view class="back"></view>
							<view class="main">
								<image src="https://file.shengmaapp.com/storage/aichat/20240522/d9c9baed501a80e5e5ad39f8e8b97b51.jpg" mode="aspectFill" class="image"></image>
								<view class="info flex">
									<view class="left">
										<view class="h3 ell">SPAGHETTI</view>
										<view class="desc ell">Italian bombastic theme with lots of horns and an energetic piano melody</view>
									</view>
									<view class="play flex">
										<text class="iconfont icon-bofang1"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="musicTitle flex">
					<view class="left">
						<text>排行热度榜</text>
					</view>
				</view>
				<scroll-view scroll-x class="scrollxView hotView">
					<view class="view">
						<view class="item">
							<view class="head flex">
								<view class="left">
									<view class="h3 ell">热歌榜</view>
									<view class="desc ell">05-23更新</view>
								</view>
								<view class="play flex" @tap="playComponents = !playComponents">
									<text class="iconfont icon-bofang1"></text>
								</view>
							</view>
							<view class="list">
								<view class="listItem flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
									<text class="sort">1</text>
									<text class="name ell">如果爱忘了(Live)</text>
									<text class="desc ell">- 汪苏泷&蔡依林</text>
								</view>
								<view class="listItem flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
									<text class="sort">2</text>
									<text class="name ell">做一个情绪稳定的人类 (才怪</text>
									<text class="desc ell">- 徐梦洁</text>
								</view>
								<view class="listItem flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
									<text class="sort">3</text>
									<text class="name ell">Hero (Explicit)</text>
									<text class="desc ell">- VodKe /ROYYNN /硬曲王</text>
								</view>
							</view>
						</view>
						<view class="item">
							<view class="head flex">
								<view class="left">
									<view class="h3 ell">流行榜</view>
									<view class="desc ell">05-23更新</view>
								</view>
								<view class="play flex" @tap="playComponents = !playComponents">
									<text class="iconfont icon-bofang1"></text>
								</view>
							</view>
							<view class="list">
								<view class="listItem flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
									<text class="sort">1</text>
									<text class="name ell">sax love</text>
									<text class="desc ell">- 刘雨欣 /特有AI</text>
								</view>
								<view class="listItem flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
									<text class="sort">2</text>
									<text class="name ell">sax love</text>
									<text class="desc ell">- CHENYI /人面兽心 /花凯</text>
								</view>
								<view class="listItem flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
									<text class="sort">3</text>
									<text class="name ell">漂亮姑娘</text>
									<text class="desc ell">- 王瑾璇</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="musicTitle flex" style="margin-top: 22rpx;">
					<view class="left">
						<text>AI音乐分类</text>
					</view>
				</view>
				<view class="navFlex flex">
					<view class="item" @tap="app.util.openUrl({ url: '/pages/index/search', animationType: 'slide-in-bottom' })">
						<image src="https://cdn1.suno.ai/image_a7a69ef4-a766-4349-93aa-ba247e733e54.png" mode="aspectFill" class="image"></image>
						<text class="text ell">流行音乐</text>
					</view>
					<view class="item" @tap="app.util.openUrl({ url: '/pages/index/search', animationType: 'slide-in-bottom' })">
						<image src="https://cdn1.suno.ai/image_28efa888-9684-4acf-93fa-0a71638df028.png" mode="aspectFill" class="image"></image>
						<text class="text ell">摇滚音乐</text>
					</view>
					<view class="item" @tap="app.util.openUrl({ url: '/pages/index/search', animationType: 'slide-in-bottom' })">
						<image src="https://cdn1.suno.ai/image_26686409-20f2-44c7-bf7b-27bac80ffc7b.png" mode="aspectFill" class="image"></image>
						<text class="text ell">民谣</text>
					</view>
					<view class="item" @tap="app.util.openUrl({ url: '/pages/index/search', animationType: 'slide-in-bottom' })">
						<image src="https://cdn1.suno.ai/image_5effdd7f-1543-41c4-9506-866692cd0ecd.png" mode="aspectFill" class="image"></image>
						<text class="text ell">电子</text>
					</view>
					<view class="item" @tap="app.util.openUrl({ url: '/pages/index/search', animationType: 'slide-in-bottom' })">
						<image src="https://cdn1.suno.ai/image_7c51283e-a1dd-44ea-8921-50fcf1704e27.png" mode="aspectFill" class="image"></image>
						<text class="text ell">舞曲</text>
					</view>
					<view class="item" @tap="app.util.openUrl({ url: '/pages/index/search', animationType: 'slide-in-bottom' })">
						<image src="https://cdn1.suno.ai/image_72095b8a-e900-4d3b-85c8-b161812f61d1.png" mode="aspectFill" class="image"></image>
						<text class="text ell">更多</text>
					</view>
				</view>
				<view class="musicTitle flex">
					<view class="left">
						<text>最新音乐创作</text>
					</view>
					<view class="right" @tap="app.util.openUrl({ url: '/pages/index/search', animationType: 'slide-in-bottom' })">更多</view>
				</view>
				<view class="newList">
					<view class="item" @tap="app.util.openUrl({ url: '/pages/create/play' })">
						<view class="main flex">
							<image src="https://file.shengmaapp.com/storage/aichat/20240401/868c9b2103421668b2d7c89f12add164.jpg" mode="aspectFill" class="image"></image>
							<view class="info">
								<view class="h3 ell">Wake（Like）</view>
								<view class="desc ell">hillsong Young & Free - Wake</view>
							</view>
							<view class="play iconfont icon-bofang2"></view>
						</view>
						<view class="foot flex">
							<view class="footItem flex">
								<text class="iconfont icon-24gf-user2"></text>
								<text class="text">165</text>
							</view>
							<view class="footItem flex">
								<text class="iconfont icon-aixin"></text>
								<text class="text">42</text>
							</view>
							<view class="footItem flex">
								<text class="iconfont icon-fenxiangzhuanfa"></text>
								<text class="text">24</text>
							</view>
						</view>
					</view>
					<view class="item" @tap="app.util.openUrl({ url: '/pages/create/play' })">
						<view class="main flex">
							<image src="https://file.shengmaapp.com/storage/aichat/20240523/3f6d39be4e8d5264e6434c02cb4e0069.jpg" mode="aspectFill" class="image"></image>
							<view class="info">
								<view class="h3 ell">SPAGHETTI</view>
								<view class="desc ell">Italian bombastic theme with lots of horns and an energetic piano melo</view>
							</view>
							<view class="play iconfont icon-bofang2"></view>
						</view>
						<view class="foot flex">
							<view class="footItem flex">
								<text class="iconfont icon-24gf-user2"></text>
								<text class="text">165</text>
							</view>
							<view class="footItem flex">
								<text class="iconfont icon-aixin"></text>
								<text class="text">42</text>
							</view>
							<view class="footItem flex">
								<text class="iconfont icon-fenxiangzhuanfa"></text>
								<text class="text">24</text>
							</view>
						</view>
					</view>
					<view class="item" @tap="app.util.openUrl({ url: '/pages/create/play' })">
						<view class="main flex">
							<image src="https://file.shengmaapp.com/storage/aichat/20240523/fa02c35d76e4c65780fc75b45e3d0efe.jpg" mode="aspectFill" class="image"></image>
							<view class="info">
								<view class="h3 ell">我是一个粉刷匠</view>
								<view class="desc ell">AI音乐研究生</view>
							</view>
							<view class="play iconfont icon-bofang2"></view>
						</view>
						<view class="foot flex">
							<view class="footItem flex">
								<text class="iconfont icon-24gf-user2"></text>
								<text class="text">165</text>
							</view>
							<view class="footItem flex">
								<text class="iconfont icon-aixin"></text>
								<text class="text">42</text>
							</view>
							<view class="footItem flex">
								<text class="iconfont icon-fenxiangzhuanfa"></text>
								<text class="text">24</text>
							</view>
						</view>
					</view>
					<view class="item" @tap="app.util.openUrl({ url: '/pages/create/play' })">
						<view class="main flex">
							<image src="https://file.shengmaapp.com/storage/aichat/20240523/7920cd1a2b1fc6dcd1fc0432c1a04f8e.jpg" mode="aspectFill" class="image"></image>
							<view class="info">
								<view class="h3 ell">想你，希望你一切都好</view>
								<view class="desc ell">U27479125</view>
							</view>
							<view class="play iconfont icon-bofang2"></view>
						</view>
						<view class="foot flex">
							<view class="footItem flex">
								<text class="iconfont icon-24gf-user2"></text>
								<text class="text">165</text>
							</view>
							<view class="footItem flex">
								<text class="iconfont icon-aixin"></text>
								<text class="text">42</text>
							</view>
							<view class="footItem flex">
								<text class="iconfont icon-fenxiangzhuanfa"></text>
								<text class="text">24</text>
							</view>
						</view>
					</view>
				</view>
				<load-footer-text :load="1"></load-footer-text>
			</scroll-view>
		</view>
	</view>
	<common-play ref="commonPlayRef" v-model="playComponents" />
</template>

<script setup>
	import { ref, inject, onMounted } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	const app = inject('app');
	
	/* 变量区域 */
	// 是否显示播放组件
	const playComponents = ref(false);
	onMounted(() => {
		
	});
</script>

<style lang="scss" scoped>
	.page{
		height: 100vh;
		background: url("/static/img/indexColor.png")no-repeat center top;
		background-size: contain;
		position: relative;
		width: 100%;
		overflow: hidden;
		flex-direction: column;
		&:after{
			position: absolute;
			right: -100rpx;
			top: -100rpx;
			background: url("/static/img/icon_template3_cover.png")no-repeat center right;
			background-size: cover;
			width: 420rpx;
			height: 420rpx;
			content: "";
			opacity: 0.2;
			filter: blur(20rpx);
		}
		.pageMain{
			position: relative;
			z-index: 2;
			flex-direction: column;
			flex: 1;
			height: 0;
			.indexHead{
				padding: 0 $padding;
				.indexView{
					flex-direction: row;
					align-items: center;
					height: 100rpx;
					.searchView{
						border-radius: 100rpx;
						padding: 0 10rpx 0 30rpx;
						width: 100%;
						height: 75rpx;
						background: rgba(255,255,255,0.06);
						flex-direction: row;
						align-items: center;
						backdrop-filter: blur(30rpx);
						.iconfont{
							color: rgba(255,255,255,0.9);
							font-size: calc(27rpx * var(--fss));
						}
						.text{
							flex: 1;
							width: 0;
							margin: 0 25rpx;
							color: rgba(255,255,255,0.5);
							font-size: calc(27rpx * var(--fss));
						}
						.btn{
							color: #000;
							font-weight: bold;
							padding: 0 28rpx;
							line-height: 55rpx;
							border-radius: 100rpx;
							font-size: calc(25rpx * var(--fss));
							background: $background;
							transition: 0.2s all;
							&:active{
								opacity: 0.8;
							}
						}
					}
					.rightUser{
						border: 4rpx solid rgba(255,255,255,0.06);
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						flex-shrink: 0;
						margin-left: 20rpx;
					}
				}
			}
			.pageScroll{
				flex: 1;
				height: 0;
				.navFlex{
					padding: 0 $padding;
					flex-direction: row;
					flex-wrap: wrap;
					margin-top: 12rpx;
					margin-bottom: -5rpx;
					.item{
						width: calc((100% - 20rpx * 2) / 3);
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						position: relative;
						border-radius: 20rpx;
						overflow: hidden;
						&:nth-child(3n){
							margin-right: 0;
						}
						&:after{
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							background: rgba(0,0,0,0.3);
							border-radius: 10rpx;
						}
						.image{
							display: block;
							width: 100%;
							height: 140rpx;
							border-radius: 10rpx;
						}
						.text{
							z-index: 2;
							position: absolute;
							width: 100%;
							padding: 0 20rpx;
							top: 50%;
							text-align: center;
							color: rgba(255,255,255,1);
							font-size: calc(26rpx * var(--fss));
							font-weight: bold;
							transform: translate(0, -50%);
						}
					}
				}
				.recomondView{
					margin: -15rpx 0 0 0;
					.item{
						$height: 300rpx;
						width: 260rpx;
						position: relative;
						height: $height + 30rpx + 20rpx;
						padding-top: 30rpx;
						padding-bottom: 20rpx;
						margin-right: 30rpx;
						transition: 0.2s all;
						&:active{
							opacity: 0.9;
						}
						&:before{
							content: "";
							z-index: 3;
							position: absolute;
							right: -35rpx;
							top: 11rpx;
							width: 473rpx * 0.2;
							height: 286rpx * 0.2;
							background: url("/static/img/lineBlock.png") no-repeat center center;
							background-size: cover;
							display: none;
						}
						&:after{
							content: "";
							position: absolute;
							top: 56rpx;
							right: 26rpx;
							z-index: 2;
							background: $bodyBackground;
							width: 31rpx;
							height: 31rpx;
							border-radius: 50%;
						}
						&:nth-child(1){
							margin-left: $padding;
						}
						&:nth-last-child(1){
							margin-right: $padding;
						}
						.back{
							width: 100%;
							height: $height;
							background: rgba(255,255,255,0.075);
							position: absolute;
							top: 40rpx;
							left: 8rpx;
							border-radius: 30rpx 70rpx 30rpx 30rpx;
							transform: rotate(-2deg);
						}
						.main{
							position: relative;
							z-index: 1;
							width: 100%;
							height: $height;
							overflow: hidden;
							border-radius: 30rpx 70rpx 30rpx 30rpx;
							.image{
								display: block;
								width: calc(100% + 6rpx);
								border-radius: 30rpx 70rpx 0 0;
								height: $height;
							}
							.info{
								position: absolute;
								left: 0;
								right: 0;
								bottom: 0;
								background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3));
								padding: 22rpx 18rpx 22rpx 22rpx;
								flex-direction: row;
								align-items: center;
								.left{
									flex: 1;
									width: 0;
									margin-right: 20rpx;
									.h3{
										font-weight: bold;
										font-size: calc(26rpx * var(--fss));
										line-height: 1.3;
										color: rgba(255,255,255,0.9);
									}
									.desc{
										font-size: calc(20rpx * var(--fss));
										line-height: 1.3;
										color: rgba(255,255,255,0.65);
										margin-top: 5rpx;
									}
								}
								.play{
									width: 50rpx;
									height: 50rpx;
									border-radius: 50%;
									background: rgba(0,0,0,0.55);
									backdrop-filter: blur(10rpx);
									flex-direction: row;
									align-items: center;
									justify-content: center;
									padding-left: 4rpx;
									.iconfont{
										font-size: calc(24rpx * var(--fss));
										color: #FFF;
									}
								}
							}
						}
					}
				}
				.musicTitle{
					padding: 0 $padding;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					height: 65rpx;
					margin-top: 20rpx;
					.left{
						position: relative;
						text{
							font-size: calc(29rpx * var(--fss));
							color: #FFF;
							font-weight: bold;
							font-style: italic;
							position: relative;
							z-index: 2;
						}
						&:after{
							content: "";
							position: absolute;
							right: -40rpx;
							top: 0;
							z-index: 1;
							width: 473rpx * 0.13;
							height: 286rpx * 0.13;
							background: url("/static/img/lineBlockOver.png") no-repeat center center;
							background-size: cover;
						}
					}
					.right{
						font-size: calc(24rpx * var(--fss));
						color: #FFF;
						opacity: 0.65;
					}
				}
				.newList{
					padding: 0 $padding;
					margin-top: 15rpx;
					.item{
						background: rgba(255,255,255,0.06);
						padding: 30rpx 30rpx 0 30rpx;
						border-radius: 9rpx;
						margin-bottom: 14rpx;
						&:nth-last-child(1){
							margin-bottom: 0;
						}
						.main{
							flex-direction: row;
							align-items: center;
							.image{
								width: 110rpx;
								height: 110rpx;
								border-radius: 16rpx;
							}
							.info{
								flex: 1;
								width: 0;
								margin: 0 22rpx;
								.h3{
									font-weight: bold;
									font-size: calc(28rpx * var(--fss));
									color: #FFF;
									line-height: 1.3;
								}
								.desc{
									font-size: calc(24rpx * var(--fss));
									color: rgba(255,255,255,0.6);
									line-height: 1.3;
									margin-top: 7rpx;
								}
							}
							.play{
								font-size: calc(28rpx * var(--fss));
								color: #000;
								line-height: 46rpx;
								width: 70rpx;
								padding-left: 3rpx;
								text-align: center;
								background: $background;
								border-radius: 30rpx;
								transition: 0.2s all;
								&:active{
									opacity: 0.8;
								}
							}
						}
						.foot{
							flex-direction: row;
							align-items: center;
							margin-top: 30rpx;
							border-top: 2rpx solid rgba(255,255,255,0.03);
							.footItem{
								flex-direction: row;
								align-items: center;
								justify-content: center;
								flex: 1;
								width: 0;
								line-height: 80rpx;
								.iconfont{
									color: rgba(255,255,255,0.6);
									font-size: calc(23rpx * var(--fss));
								}
								.text{
									color: rgba(255,255,255,0.75);
									margin-left: 12rpx;
									font-size: calc(25rpx * var(--fss));
								}
							}
						}
					}
				}
				.hotView{
					margin: 15rpx 0 0 0;
					.item{
						background: rgba(255, 255, 255, 0.06);
						margin-right: 22rpx;
						border-radius: 35rpx;
						width: 600rpx;
						&:nth-child(1){
							margin-left: $padding;
						}
						&:nth-last-child(1){
							margin-right: $padding;
						}
						.head{
							padding: 30rpx 30rpx;
							flex-direction: row;
							align-items: center;
							.left{
								flex: 1;
								width: 0;
								margin-right: 22rpx;
								.h3{
									font-weight: bold;
									font-size: calc(28rpx * var(--fss));
									line-height: 1.2;
									color: rgba(255,255,255,0.9);
								}
								.desc{
									margin-top: 13rpx;
									font-size: calc(20rpx * var(--fss));
									line-height: 1.2;
									color: rgba(255,255,255,0.5);
								}
							}
							.play{
								width: 50rpx;
								height: 50rpx;
								border-radius: 50%;
								background: $background;
								flex-direction: row;
								align-items: center;
								justify-content: center;
								padding-left: 4rpx;
								.iconfont{
									font-size: calc(26rpx * var(--fss));
									color: #000;
								}
							}
						}
						.list{
							background: #2a2a2a;
							border-radius: 35rpx;
							padding: 36rpx 30rpx;
							.listItem{
								flex-direction: row;
								align-items: center;
								margin-bottom: 35rpx;
								&:nth-last-child(1){
									margin-bottom: 0;
								}
								.sort{
									color: rgba(255,255,255,0.8);
									font-size: calc(26rpx * var(--fss));
								}
								.name{
									margin-left: 16rpx;
									margin-right: 10rpx;
									color: rgba(255,255,255,0.8);
									font-size: calc(26rpx * var(--fss));
								}
								.desc{
									color: rgba(255,255,255,0.4);
									font-size: calc(26rpx * var(--fss));
									flex: 1;
									width: 0;
								}
							}
						}
					}
				}
			}
		}
	}
</style>